<template>
	<view class="card">
		<view v-if='item.ifShow' :class="item.component=='border'?'border':'item'" v-for="(item,index) in detailSchema" :key='index'>
			<template v-if="item.component!='border'">
				<view class="label">{{item.label}}:</view>
				<view class="value">{{item.component!='dict'?dataObj[item.field]:$util.dictGetText(item.dictCode,dataObj[item.field])}}</view>
			</template>
		</view>
		<view class="item">
			<view class="label">签证附件</view>
		</view>	
	</view>
</template>

<script>
	export default {
		name: "app-detail",
		props:{
			detailSchema:{
				typeof:Array,
				require:true,
				default:()=>{
					return []
				}
			},
			data:{
				typeof:Object,
				default:null
			},
			url:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				dataObj:{}
			};
		},
		created() {
			if(!this.url&&this.data) {
				this.dataObj = this.data;
			}
	
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 700rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0 2rpx 24rpx 0 rgba(210, 213, 219, 0.5);
		border-radius: 8rpx;
		padding:24rpx;
		box-sizing: border-box;
		.item {
			margin-bottom: 24rpx;
			display: flex;
			font-size: 28rpx;
			
			.label {
				color: #333333;
				min-width: 120rpx;
			}

			.value {
				margin-left: 10rpx;
				color: #969CAB;
			}
			&:last-child {
				margin: 0;
			}
		}
		.border {
			width:100%;
			margin-bottom: 24rpx;
			border-bottom: 1px solid rgba(0,0,0,.1);
		}
	}
</style>